<!-- 题库关联资源 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'bank/bank' }">题库管理</el-breadcrumb-item>
      <el-breadcrumb-item>题库关联资源</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="questionBankInline" class="booking-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="questionBankInline.questionBankID" placeholder="题库ID"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="questionBankInline.questionBankName" placeholder="题库名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="resourceList" highlight-current-row v-loading="loading" border
      element-loading-text="加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center" prop="questionBankID" label="题库ID" width="200">
      </el-table-column>
      <el-table-column align="center" prop="questionBankName" label="题库名称" width="200">
      </el-table-column>
      <el-table-column align="center" prop="relatedResourceID" label="关联资源ID" width="100">
      </el-table-column>
      <el-table-column align="center" prop="relatedResourceType" label="关联资源类型" width="200">
      </el-table-column>
      <el-table-column align="center" prop="resourceLink" label="资源链接" width="300">
        <template slot-scope="scope">
          <div><a :href="scope.row.resourceLink" target="_blank">{{ scope.row.resourceLink }}</a></div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remarks" label="备注" width="200">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import { resource, } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      title: '',
      questionBankInline: {
        page: 1,
        limit: 10,
        questionBankID: '',
        questionBankName: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      resourceList: [], //资源数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.questionBankInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 17,
        data: [
          {
            date: '2024-04-01',
            questionBankID: 'T001',
            questionBankName: 'Internal Medicine Question Bank',
            relatedResourceID: 'R001',
            relatedResourceType: 'Documentation',
            resourceLink: 'https://example.com/resources/docs/internal_medicine.pdf',
            remarks: 'Core question bank'
          },
          {
            date: '2024-04-02',
            questionBankID: 'T002',
            questionBankName: 'Surgery Question Bank',
            relatedResourceID: 'R002',
            relatedResourceType: 'Video Tutorial',
            resourceLink: 'https://example.com/resources/videos/surgery_tutorials.mp4',
            remarks: 'Includes surgical demonstrations'
          },
          {
            date: '2024-04-03',
            questionBankID: 'T003',
            questionBankName: 'Obstetrics & Gynecology Question Bank',
            relatedResourceID: 'R003',
            relatedResourceType: 'Case Analysis',
            resourceLink: 'https://example.com/resources/cases/obstetrics_gynecology.docx',
            remarks: 'Typical cases'
          },
          {
            date: '2024-04-04',
            questionBankID: 'T004',
            questionBankName: 'Pediatrics Question Bank',
            relatedResourceID: 'R004',
            relatedResourceType: 'Image Gallery',
            resourceLink: 'https://example.com/resources/images/pediatrics_symptoms.zip',
            remarks: 'Disease symptoms images'
          },
          {
            date: '2024-04-05',
            questionBankID: 'T005',
            questionBankName: 'Emergency Medicine Question Bank',
            relatedResourceID: 'R005',
            relatedResourceType: 'Mock Test',
            resourceLink: 'https://example.com/resources/quizzes/emergency_medicine.xlsx',
            remarks: 'Past exam questions'
          },
          {
            date: '2024-04-06',
            questionBankID: 'T006',
            questionBankName: 'Medical Imaging Question Bank',
            relatedResourceID: 'R006',
            relatedResourceType: 'Medical Imaging Materials',
            resourceLink: 'https://example.com/resources/images/medical_imaging.jpg',
            remarks: 'CT/MRI images'
          },
          {
            date: '2024-04-07',
            questionBankID: 'T007',
            questionBankName: 'Pharmacology Question Bank',
            relatedResourceID: 'R007',
            relatedResourceType: 'Drug Manuals',
            resourceLink: 'https://example.com/resources/docs/drug_manuals.pdf',
            remarks: 'Common drug information'
          },
          {
            date: '2024-04-08',
            questionBankID: 'T008',
            questionBankName: 'Pathology Question Bank',
            relatedResourceID: 'R008',
            relatedResourceType: 'Pathology Slide Images',
            resourceLink: 'https://example.com/resources/images/pathology_slides.png',
            remarks: 'Histology slides'
          },
          {
            date: '2024-04-09',
            questionBankID: 'T009',
            questionBankName: 'Nursing Question Bank',
            relatedResourceID: 'R009',
            relatedResourceType: 'Nursing Procedure Videos',
            resourceLink: 'https://example.com/resources/videos/nursing_procedures.mp4',
            remarks: 'Nursing procedure flows'
          },
          {
            date: '2024-04-10',
            questionBankID: 'T010',
            questionBankName: 'Psychology Question Bank',
            relatedResourceID: 'R010',
            relatedResourceType: 'Psychology Articles',
            resourceLink: 'https://example.com/resources/articles/psychology.html',
            remarks: 'Mental'
          }
        ]
      }
      this.loading = false
      this.resourceList = res.data
      this.pageparm.currentPage = this.questionBankInline.page
      this.pageparm.pageSize = this.questionBankInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  

      /***
       *  正式环境环境 调用接口
       */
      resource(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.resourceList = res.data
            // 分页赋值
            this.pageparm.currentPage = this.questionBankInline.page
            this.pageparm.pageSize = this.questionBankInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.questionBankInline.page = parm.currentPage
      this.questionBankInline.limit = parm.pageSize
      this.getdata(this.questionBankInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.questionBankInline)
    },

  }
}
</script>

<style scoped>
.booking-search {
  margin-top: 20px;
}
</style>

 
 